<template>
  <div class="component-list-container">
    <div
      class="plugin-list-wrapper"
      v-for="leaf in TREE_LIST"
      :key="leaf.label"
    >
      <div class="plugin-item-header" @click="handleClickLeaf(leaf)">
        <i
          :class="leaf.visible ? 'el-icon-caret-bottom' : 'el-icon-caret-right'"
        ></i>
        <span>{{ leaf.label }}</span>
      </div>
      <transition name="el-fade-in-linear el-fade-in">
        <div class="plugin-item-wrapper" v-show="leaf.visible">
          <draggable
            v-model="leaf.value"
            :options="{
              group: { name: 'plugin', pull: 'clone', put: false },
              sort: false,
            }"
            animation="300"
            :clone="handleClone"
          >
            <transition-group>
              <div
                class="plugin-item"
                v-for="item in leaf.value"
                :key="item.type"
              >
                {{ item.label }}
              </div>
            </transition-group>
          </draggable>
        </div>
      </transition>
      <!-- <div v-for="component in leaf.value" :key="component.type">
        <div>{{ component.label }}</div>
      </div> -->
    </div>
  </div>
</template>
<script>
import { TREE_LIST, CUSTOM_COMPONENT_JSON_MAP } from "./constant";
import draggable from "vuedraggable";
import { genID } from "@/utils/util";

export default {
  components: {
    draggable,
  },
  data() {
    return {
      arr: [],
      TREE_LIST,
      CUSTOM_COMPONENT_JSON_MAP,
    };
  },
  methods: {
    handleClickLeaf(leaf) {
      leaf.visible = !leaf.visible;
    },
    handleClone({ type, label }) {
      console.log(type, label);
      const customComponentJson = CUSTOM_COMPONENT_JSON_MAP[type];
      const customJson = { id: genID(), type };
      const item = customComponentJson
        ? {
            ...customJson,
            ...JSON.parse(JSON.stringify(customComponentJson)),
          }
        : {
            ...customJson,
            title: `${label}标题`,
            value: `${label}的默认值`,
            props: {},
            dependence: {
              key: "",
              value: true,
            },
            rules: [
              {
                required: true,
                message: `请输入${label}标题`,
              },
              {
                pattern: "",
                message: `${label}的规则`,
              },
              {
                dependence: [],
                validator: "",
                message: "这里填写规则依赖",
              },
            ],
          };
      return item;
    },
  },
};
</script>
<style lang="less" scoped>
.component-list-container {
  overflow: auto;
  font-size: 14px;
  color: #595959;
  padding-top: 15px;
  padding-right: 30px;
  min-width: 210px;

  .plugin-item-header {
    padding: 10px 0 15px 15px;
    cursor: pointer;
    i {
      margin-right: 5px;
    }
  }

  .plugin-item-wrapper {
    padding-left: 30px;
    .plugin-item {
      min-width: 150px;
      padding: 10px;
      margin-bottom: 5px;
      text-align: center;
      border: 1px solid @color-border;
      cursor: move;
    }
  }
}
</style>
